/**
 *  注意：
 *      这个组件应该在流程中没用到，现在废弃了，不过为了保证不出错不进行删除！
 *
 */

import React, { forwardRef, useEffect, useState } from 'react';
import { TreeSelect } from 'antd';
import { translateTreeData } from '@/utils/utils';
import { getEnableOrgTree } from '@/services/Organization/orgmanage';

const DICTIONARY = {
    company: {
        fileName: {
            value: 'organizationPath',
            title: 'organizationName'
        },
        xhrMethod: getEnableOrgTree
    },
    department: {
        fileName: {
            value: 'organizationCode',
            title: 'organizationName'
        },
        xhrMethod: getEnableOrgTree
    }
};

const fetchData = async (type, params) => {
    let loading = true;
    let res = [];
    const { data, code } = await DICTIONARY[type].xhrMethod(params);
    if (code === 10000) {
        res = translateTreeData(data, DICTIONARY[type].fileName);
    }
    loading = false;
    return { res, loading };
};

const Department = ({ value = {}, onChange, ...otherProps }, ref) => {
    const [companyData, setCompanyData] = useState([]);
    const [departmentData, setDepartmentData] = useState([]);
    const [organizationPath, setOrganizationPath] = useState(null);
    const [cLoading, setCLoading] = useState(true);
    const [dLoading, setDLoading] = useState(true);
    const { company, department } = value;

    // onChange
    const handleOnChange = (type, changeValue) => {
        if (onChange) {
            let payload;
            if (type === 'company') {
                payload = {
                    company: changeValue,
                    department: undefined
                };
                setOrganizationPath(changeValue);
            } else {
                payload = {
                    company: organizationPath,
                    department: changeValue
                };
            }
            onChange(payload);
        }
    };

    // 获取公司
    const getCompany = async () => {
        const { res, loading } = await fetchData('company', { organizationTypes: [1, 2], showTreeFlag: 0 });
        setCompanyData(res);
        setCLoading(loading);
    };

    // 获取部门
    const getDepartment = async id => {
        const { res, loading } = await fetchData('department', {
            organizationTypes: [3, 4],
            showTreeFlag: 0,
            parentOrganizationPath: id
        });
        setDepartmentData(res);
        setDLoading(loading);
    };

    // 选择公司
    const handleOnSelect = selectValue => {
        if (departmentData.length > 0) {
            setDepartmentData([]);
        }
        getDepartment(selectValue);
    };

    useEffect(() => {
        getCompany();
    }, []);

    useEffect(() => {
        if (company) {
            getDepartment(company);
        }
    }, [company]);

    return (
        <div ref={ref} style={{ display: 'flex' }}>
            <TreeSelect
                loading={cLoading}
                value={company}
                treeData={companyData}
                onChange={changeValue => handleOnChange('company', changeValue)}
                onSelect={handleOnSelect}
                getPopupContainer={trigger => trigger.parentNode}
                {...otherProps}
            />
            <TreeSelect
                loading={dLoading}
                value={department}
                treeData={departmentData}
                onChange={changeValue => handleOnChange('department', changeValue)}
                getPopupContainer={trigger => trigger.parentNode}
                {...otherProps}
                style={{ marginLeft: 5 }}
            />
        </div>
    );
};

export default forwardRef(Department);
